<template>
  <div class="changeInfo_box">
    <el-form
      ref="changeInfoForm"
      :model="changeInfoForm"
      :rules="changeInfoRules"
      label-postion="left"
      class="changeInfo_form"
    >
      <div class="changeBox">
        <el-form-item 
        label="手机号"
        prop="phoneNumber"
        >
            <el-input 
            v-model="changeInfoForm.phoneNumber"
            autocomplete="off"
            placholder="请输入手机号"
            name="phoneNumber"
            tabindex="1"
            >           
            </el-input>
        </el-form-item>
            
        <el-form-item>
          <el-cascader
          v-model="changeInfoForm.defaultRegion"
          :options="options"
          placeholder="请选择更改的检测地点"
          style="width: 500px"
          >
          </el-cascader>
        </el-form-item>

        <el-button
        class="cancelBtn"
        style="width: 120px; margin-left: 50px"
        type="info"
        @click="back_to_home"
        >
            返回
        </el-button>

        <el-button
        class="submitBtn"
        type="primary"
        style="width: 120px; margin-left: 150px"
        @click.native.prevent="handleChangeInfo"
        >
            提交
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  userChangeInfo
} from '@/api/Info/getInfo';
export default {
    name: "changeInfo",
    data() {
        var checkPhoneNumber = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号码'));
            } else {
                if(value.length !== 11){
                    callback(new Error('手机号码长度应为11位'));
                } else {
                    var test = /^[1-9][0-9]{10}$/g;
                    if (!test.test(value)) {
                        callback(new Error('手机号码格式错误'));
                    } else {
                        callback();
                    }
                }
            }
        };
        return {
            changeInfoForm: {
                phoneNumber: '',
                defaultRegion: []

            },
            changeInfoRules: {
                phoneNumber: [{required: true, trigger: 'blur', validator: checkPhoneNumber}],
                defaultRegion: [{required: true, message: '请选择要更改的检测地点'}]
            },
            options: [],
            loading:false
        }
    },
    created () {
      this.$store.dispatch('region/getAllInfo',1).then((data) => {
        this.options = data;
      });
      this.changeInfoForm.phoneNumber = this.$store.getters['userInfo/getPhoneNumber'];
      this.changeInfoForm.defaultRegion[3] = this.$store.getters['userInfo/getDefaultRegion'];
    },
    methods: {
      back_to_home () {
        this.$router.go(-1)
      },
      handleChangeInfo() {
          this.$refs.changeInfoForm.validate(valid => {
              if (valid) {
                  this.loading = true;
                  const input = {};
                  input.phoneNumber = this.changeInfoForm.phoneNumber;
                  input.defaultRegion = this.changeInfoForm.defaultRegion[3];

                  userChangeInfo(input).then((data) => {
                    this.loading = false;
                    this.$message.success('修改信息成功');
                    this.$router.push({ name: 'Info'});
                  });
              } else {
                  console.log('error changeInfo');
                  return false;
              }
          });
      }
    }
}
</script>

<style>
.changeInfo_form {
  width: 500px;
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translate(-50%,-50%);
}

.changeBox {
  overflow: hidden;
  padding-top: 10px;
}

.el-form-item {
  margin-bottom: 25px;
}

.cancelBtn {
  margin-top: 50px;
}
</style>